<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html th:replace="~{work/modify/common/layout :: layout('派单', ~{::title}, ~{::content}, ~{::script})}"
      xmlns:th="http://www.w3.org/1999/html">
<head>
    <title>工单管理-天猫派单</title>
</head>
<body>

<div th:fragment="content">
    <link rel="stylesheet" href="/static/style/work/modify/distribute.css">
</div>

<div class="page-work-modify-distribute" th:fragment="content">
    <form class="layui-form" method="post" action="/work/modify/save/distribute.action" lay-filter="zmn-work-form">
        <input type="hidden" id="orderId" name="orderId" th:value="${orderId}"/>
        <input type="hidden" id="workId" name="workId" th:value="${workId}"/>
        <input type="hidden" id="companyId" th:value="${companyId}"/>
        <input type="hidden" id="manageCompanyId" th:value="${manageCompanyId}"/>
        <input type="hidden" id="masterId" name="masterId"/>

        <div class="layui-form-item">
            <div class="layui-inline layui-hide" id="tmall-btn-show">
                <label class="layui-form-label" style="width: 220px;">跳过检查VIP或大促标示校验原因：</label>
                <div class="layui-input-inline">
                    <div th:replace="this :: selectForStopOrderTypeCheck"></div>
                </div>
            </div>
            <div class="layui-inline distribute-btn-wrapper">
                <div class="layui-btn-container">
                    <button class="layui-btn btn-distribute" id="distribute" type="submit" lay-filter="distribute"
                            lay-submit>确认派单
                    </button>
                </div>
            </div>
            <div class="layui-inline distribute-btn-wrapper">
                <p class="d-tips" style="color:red ">
                    <th:block th:if="${ distributeVO.vipOrder == 2 || distributeVO.bigPromotionOrder == 2}">
                        订单标示：该订单属于
                        <span th:if="${distributeVO.bigPromotionOrder == 2}">[大促订单]</span>
                        <span th:if="${distributeVO.vipOrder == 2}">[VIP订单]</span>，
                    </th:block>
                    天猫订单服务类型： <span th:text="${distributeVO.serviceCodeName}"></span>
                </p>
            </div>
        </div>
    </form>

    <div class="layui-tab layui-tab-card" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li data-type="normal" class="layui-this">正常派单</li>
            <li th:if="${ distributeVO.vipOrder == 2 || distributeVO.bigPromotionOrder == 2}">消耗派单</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" id="normalTableView">
            </div>
            <div th:if="${ distributeVO.vipOrder == 2 || distributeVO.bigPromotionOrder == 2}"
                 class="layui-tab-item" id="consumeTableView">
            </div>

            <table id="table-matser" lay-filter="tableOfMatserList"></table>
        </div>
    </div>

    <div class="layui-hide" id="modal-voice-wrapper">
        <div class="modal-main">
            <div class="modal-content">
                <p>目前系统支持和工程师app的语音通话的手机品牌有：华为、小米、vivo、oppo、魅族，其他手机品牌系统暂不支持</p>
            </div>
            <div class="modal-footer">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="btn-container">
                            <button class="layui-btn" type="submit" lay-filter="form-modal" lay-submit>我知道了</button>
                            <div class="input-noTips">
                                <input type="checkbox" name="noTips" lay-skin="primary" title="下次不再提醒">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-hide" id="modal-distribute-wrapper">
        <div class="modal-main">
            <div class="modal-content">
                <p>
                    已有工程师领单，确认重新派单？<br>
                    重新派单后，工单状态将变更至：已派单状态，并且清空：服务项目、人工优惠等信息。
                </p>
            </div>
            <div class="modal-footer">
                <div class="btn-container">
                    <button class="layui-btn" id="btn-confirm">确认</button>
                    <button class="layui-btn layui-btn-primary" id="btn-cancel">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 不检查订单类型的原因 -->
<div th:fragment="selectForStopOrderTypeCheck">
    <select name="stopOrderTypeCheckReason">
        <option value="">全部</option>
        <th:block th:if="${distributeVO.vipOrder == 2}">
            <option th:value="111">VIP-该区域无VIP工人/已离职</option>
            <option th:value="112">VIP-该区域VIP工人请假</option>
            <option th:value="113">VIP-偏远区域无固定工人</option>
            <option th:value="114">VIP-该区域VIP工人容量已满</option>
        </th:block>
        <th:block th:if="${distributeVO.bigPromotionOrder == 2}">
            <option th:value="115">大促-该区域无大促工人/已离职</option>
            <option th:value="116">大促-该区域大促工人请假</option>
            <option th:value="117">大促-该偏远区域无固定工人</option>
            <option th:value="118">大促-该区域大促工人容量已满</option>
        </th:block>
    </select>
</div>

<script th:inline="javascript">
    var json = {
        dutyInfo: [[${distributeVO.dutyInfo}]],
        masterId: [[${distributeVO.masterId}]],
        // 消耗派单列表
        masterList: [[${distributeVO.masterList}]],
        // 正常派单列表
        recommendMasterList: [[${distributeVO.recommendMasterList}]],
        mainSkillId: [[${distributeVO.mainSkillId}]],
        vipOrder: [[${distributeVO.vipOrder}]],
        bigPromotionOrder: [[${distributeVO.bigPromotionOrder}]],
        plat: [[${plat}]],
        recommendStatus: [[${distributeVO.recommendStatus}]],
    };
    var layuiModel = {
        oms_work_modify_tamll_distribute: "work/modify/zmn.oms.work.modify.tmall.distribute"
    };
</script>
</body>
</html>


